<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<!-- 传统的做法 -->
<!-- <script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>
<script src="./d.js"></script>
<script src="./e.js"></script>
<script src="./f.js"></script>
<script src="./g.js"></script> -->
<script>
// 开发一个大型、复杂的项目时，代码和文件会很多
// 1.多个js脚本之间的依赖关系容易混乱（比如 a依赖c，c依赖f....）
// 2.多个js脚本中的命名问题（命名冲突、覆盖）
// 3.相同的业务逻辑不方便复用


// 前端模块化
// 模块：一个js文件就是一个模块
// 模块化：就是将某个功能封装起来，并提供一个使用的接口，多个模块之间互不影响（每一个模块是一个独立的作用域），将多个模块组装成想要的应用程序

// Commonjs模块化规范
// nodejs中遵循Commonjs模块化规范
// 后端使用，同步加载执行

// AMD模块化规范
// AMD -> Asynchronous Module Definition 异步模块定义
// 代表作 require.js 是一个轻量级的模块载入/输出的框架（进口 ）
// 前端使用，异步加载，推崇依赖前置，提前加载执行

// CMD模块化规范
// CMD -> Common Module Definition 通用模块定义
// 代表作 sea.js 是一个轻量级的模块载入/输出的框架（国产）玉伯
// 前端使用，异步加载，推崇依赖就近，按需加载执行

// ES6之前，前端没有任何模块化相关的规范
// 以上模块化规范都是产生于开发社区中（非官方）

// 在ES6发布时，在语言层面上实现了模块化规范（官方）
// ECMAScript Module -> ES模块
// ES模块可以在前端使用，也可以在nodejs中使用，完全可以替代Commonjs AMD CMD等模块化规范

</script>
</body>
</html>